<template>
    <el-dialog v-model="baTable.table.extend!.showCancelDialog" align-center class="ba-operate-dialog">
        <template #header>
            <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">
                {{ $t('shop.order.order.order_cancel_verify') }}
            </div>
        </template>
        <div class="warn-tip">
            <el-alert type="warning" :closable="false" show-icon title="通过申请后将退回付款金额（原路退款）并取消该订单" />
        </div>
        <el-scrollbar height="80%">
            <el-form ref="formRef" :model="form" class="form">
                <el-form-item label="申请原因" prop="reason">
                    <el-text>{{ baTable.table.extend!.orderData.cancel_reason }}</el-text>
                </el-form-item>
                <el-form-item label="付款金额" prop="pay_price">
                    <el-text>{{ baTable.table.extend!.orderData.pay_price }}</el-text>
                </el-form-item>
                <el-form-item label="审核说明" prop="remark">
                    <el-input v-model="form.remark" type="textarea" rows="6" placeholder="请填写通过或拒绝原因" />
                </el-form-item>
            </el-form>
        </el-scrollbar>
        <template #footer>
            <view class="action">
                <el-button type="primary" @click="onCancel(refundStatus.agree)">通过</el-button>
                <el-button type="danger" @click="onCancel(refundStatus.refuse)">拒绝</el-button>
            </view>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { inject, ref } from 'vue'
import type baTableClass from '/@/utils/baTable'
import { Action, ElMessage, ElMessageBox } from 'element-plus'
import { cancelOrder } from '/@/api/backend/shop/order/order'
const baTable = inject('baTable') as baTableClass

enum refundStatus {
    agree = 1,
    refuse = 2,
}

interface cancelForm {
    reason: string
    status: number
    remark: string
}
const form = ref(<cancelForm>{
    status: refundStatus.agree,
    remark: '',
})

const onCancel = (status: number) => {
    if (status === refundStatus.refuse && !form.value.remark) {
        return ElMessage.error('请填写拒绝原因')
    }
    const msg = status === refundStatus.agree ? '通过' : '拒绝'
    ElMessageBox.alert(`确定要${msg}订单取消审核吗?`, '审核结果', {
        confirmButtonText: '确定',
        callback: (action: Action) => {
            if (action === 'confirm') {
                const rowData = baTable.table.extend!.orderData
                cancelOrder({
                    id: rowData.id,
                    status,
                    remark: form.value.remark,
                }).then((res) => {
                    if (res.code != 0) {
                        baTable.onTableHeaderAction('refresh', {})
                    }
                })
                baTable.table.extend!.showCancelDialog = false
                baTable.table.extend!.showDetailDialog = false
            }
            ElMessageBox.close()
        },
    })
}
</script>

<style lang="scss" scoped>
.form {
    padding: 10px;
}

.warn-tip {
    padding: 10px;
}

.action {
    display: flex;
    justify-content: center;
    padding: 10px;
}
</style>
